<template>
  <div class="search">
    <!-- <div class="search-dropdown-menu">
      <van-dropdown-menu active-color="#ee0a24" >
      <van-dropdown-item v-model="state.value" :options="state.option" />
    </van-dropdown-menu>
    </div> -->
    <div class="search-input">
      <van-search v-model="state.searchValue" show-action placeholder="请输入搜索关键词" >
      <template #action>
        <div @click="onClickButton">搜索</div>
      </template>
    </van-search>
    </div>
    
  </div>
</template>

<script setup lang='ts'>
import { reactive } from 'vue';
import {searchByKeyWord} from '@/api/index'
import { userStore } from '@/store/index'
import _ from 'lodash';
const user=userStore()
const state = reactive({
  value: '',
  searchValue: '',
  option: [
    {
      text: '全部',
      value: ''
    },
    {
      text: '猫咪',
      value: 'goods'
    },
    {
      text: '小狗',
      value: 'shop'
    }
  ]
})
const onClickButton = _.debounce(() => {
  searchByKeyWord(state.searchValue).then((res:any) => {
    if (res.code==200) {
      user.setCardList(res.data)
    }
  })
}, 500)
</script>

<style lang='less' scoped>
.search {
  width: 100%;
  background: #f3eeee;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .search-dropdown-menu {
    width: 100px;
  }

  .search-input {
    flex: 1;
  }

}
</style>
